<template>
	<div class="system-role-container layout-padding">
		<div class="system-role-padding layout-padding-auto layout-padding-view">
			<div class="system-user-search mb15">
				<el-form :inline="true" :model="dataForm">
					<el-form-item>
						<el-input placeholder="区域名称" v-model="dataForm.name"></el-input>
					</el-form-item>
					<el-form-item>
						<el-select clearable v-model="dataForm.status" placeholder="启用状态" style="width: 180px;" @change="filterChange">
							<el-option label="停用" :value="0"></el-option>
							<el-option label="启用" :value="1"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item><el-button size="default" type="primary" class="ml10" @click="onSearch()">查询</el-button></el-form-item>
					<el-form-item v-if="getAuthClick('basic-region-create')"><el-button size="default" type="success" class="ml10" @click="onOpenAddRole()" >添加</el-button></el-form-item>
				</el-form>
			</div>
			<el-table :data="state.tableData.data" v-loading="state.tableData.loading" style="width: 100%">
				<el-table-column prop="number" label="区域编号" align="center" />
				<el-table-column prop="name" label="区域名称" align="center" show-overflow-tooltip></el-table-column>
				<el-table-column prop="road_num" align="center" label="道路数量" show-overflow-tooltip></el-table-column>
				<el-table-column prop="intersection_num" align="center" label="路口数量" show-overflow-tooltip></el-table-column>
				<el-table-column prop="location_num" align="center" label="路段数量" show-overflow-tooltip></el-table-column>
				<el-table-column prop="status" label="启用状态" align="center" show-overflow-tooltip>
					<template #default="scope">
						<div>
							<el-link type="danger" v-if="scope.row.status==0">停用</el-link>
							<el-link type="success" v-if="scope.row.status==1">启用</el-link>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="updated_at" label="更新时间" align="center" />
				<el-table-column label="操作" align="center">
					<template #default="scope">
						<div>
							<el-link @click="onOpenEditRole(scope.row)" v-if="showUpdataClick" type="primary">编辑</el-link>
							<el-link style="margin-left:10px" v-if="showDeleteClick" @click="onDelect(scope.row)" type="danger">删除</el-link>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div style="display: flex; justify-content: flex-end;margin-right:30px">
				<el-pagination
				 style="margin-top:20px;"
				  background layout="prev, pager, next" 
				  :current-page="dataForm.page"
				  :page-size="dataForm.limit"
				  @current-change="handleCurrentChange"
				  :total="total" />
			</div>
		</div>
		<RoleDialog ref="roleDialogRef" @refresh="getTabelList()" :tableData="tableData"/>
		<editDialog ref="editDialogRef" @refresh="getTabelList()" :tableData="tableData"></editDialog>
	</div>
</template>

<script setup lang="ts" name="systemRole">
import { defineAsyncComponent, reactive, onMounted, ref,defineExpose, computed } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import {useBasicApi} from "/@/api/system/menu/index"

import {useUserInfo} from "/@/stores/userInfo"

	const userInfo = useUserInfo();
	const permissions=userInfo.userInfos.permissions
	// 判断是否存在组件userInfo.userInfos.permissions
	const getAuthClick=(set:string)=>{
		let sert=permissions.findIndex((item)=>
		item==set
	)
	
	return sert>=0?true:false
	}
	 const showUpdataClick=ref(getAuthClick('basic-region-update'))
	 const showDeleteClick=ref(getAuthClick('basic-region-delete'))
	
const BasicApi = useBasicApi()

// 引入组件
const RoleDialog = defineAsyncComponent(() => import('/@/views/basic/region/dialog.vue'));
const editDialog = defineAsyncComponent(() => import('/@/views/basic/region/editDialog.vue'));
const total = ref(1)
const tableData = ref()
// dx定义
const dataForm = ref({
	status:"",
	page:1,
	limit:10,
	name:"",
})
const ruleForm = ref({
	number:"",
	name:"",
	status:"",
})
const handleCurrentChange = (val:number)=>{
	dataForm.value.page = val
	getTabelList()
}
const filterChange = (val:any)=>{
	if(dataForm.value.status==undefined){
		dataForm.value.status=''
	}
	
}
const onSearch = (async ()=>{
	dataForm.value.search = `status:${dataForm.value.status};name:${dataForm.value.name}:like`
	getTabelList()
})
const getTabelList = (async ()=>{
	state.tableData.loading= true
	const res = await BasicApi.BasicTableApi(dataForm.value);
	if(res.isSuccess){
		state.tableData.data = res.returnData.data
		total.value = res.returnData.total
		dataForm.value.page = res.returnData.current_page
		state.tableData.loading= false
	}
})

const disabled = ref<Boolean>(false)
const onDelect = (async (row:object)=>{
	ElMessageBox.confirm(`此操作将永久删除此数据，是否继续?`, '提示', {
	confirmButtonText: '确认',
	cancelButtonText: '取消',
	type: 'warning',
})
	.then(async ()=>{
		let res = await BasicApi.BasicDelApi({id:row.id});
		if(res.isSuccess){
			ElMessage.success('删除成功');
			getTabelList()
		}else{
			ElMessage.error('删除失败')
		}
	})
})
// dx定义结束

// 定义变量内容
const roleDialogRef = ref();
const state = reactive<SysRoleState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});
// 打开新增角色弹窗
const onOpenAddRole = () => {
	tableData.value = ruleForm.value
	roleDialogRef.value.openDialog();
};
const editDialogRef = ref()
// 打开修改角色弹窗
const onOpenEditRole = (row:object) => {
	tableData.value = row
	editDialogRef.value.openDialog();
};

// 页面加载时
onMounted(() => {
	getTabelList()
});

</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
		.el-table {
			flex: 1;
		}
	}
}
.el-input{
	height: 40px;
}
.el-button{
	height: 40px;
}
</style>
